<div class="page">
    <div class="main">
        <div class="step">
            <div class="done done2">
                <img src="../../../../../assets/images/done.png"><span>模板配置</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>数据集配置</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>模型配置</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>模型训练</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>模型评估</span>
            </div>
            <div class="done done1">
                <img src="../../../../../assets/images/run.png"><span>应用评估</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型部署</span>
            </div>
        </div>
        <div class="top_line"><img src="../../../../../assets/images/arrow.jpg" class="top_arrow"></div>
        <div class="context">
            <div class="barChart">
                <div class="barSelect">
                    <button nz-button nzType="default" class="selected">All</button>&nbsp;
                    <button nz-button nzType="default" class="unselect">Char</button>&nbsp;
                    <button nz-button nzType="default" class="unselect">Box</button>
                </div>
                <div echarts [options]="barChart" style="height: 400px;width:100%;"></div>
            </div>
            <div class="panel-title" (click)="swIsDetail()"> 详细评估&nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon [nzType]="isDetail?'caret-up':'caret-down'" nzTheme="outline"></i></div>
            <div class="panel-sub-title" *ngIf="isDetail">该标签识别的图片为识别错误的图片</div>
            <div class="tables" *ngIf="isDetail">
                <nz-table
                    #rowSelectionTable
                    nzShowPagination
                    nzShowSizeChanger
                    [nzData]="listOfData"
                >
                <tbody>
                    <tr>
                        <td>
                            <img *ngFor="let data of rowSelectionTable.data" src="{{ data.url }}" >                        
                        </td>
                    </tr>
                </tbody>
                </nz-table>
            </div> 
            <div class="row-item">
                <div class="row-item-title">资源池</div>
                <div class="row-item-ctx">
                    <nz-radio-group >
                        <label nz-radio nzValue="公共资源池">公共资源池</label>
                        <label nz-radio nzValue="专属资源池">专属资源池</label>
                    </nz-radio-group>
                </div>
            </div>
            <div class="row-item">
                <div class="row-item-title">计算节点规格</div>
                <div class="row-item-ctx">
                    <nz-select ngModel="sel1">
                        <nz-option nzValue="ocr-gru-1" nzLabel="ocr-gru-1"></nz-option>
                    </nz-select>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <nz-select ngModel="sel2">
                        <nz-option nzValue="modelarts.kat1.xlarge" nzLabel="modelarts.kat1.xlarge"></nz-option>
                    </nz-select>
                </div>
            </div>
            <div class="row-item">
                <div class="row-item-title">测试服务启动状态</div>
                <div class="row-item-ctx">
                    <nz-switch [(ngModel)]="swValue"></nz-switch>&nbsp;&nbsp;&nbsp;&nbsp;
                    <nz-alert *ngIf="state == 'fin'" nzType="success" nzMessage="服务启动完成" nzShowIcon></nz-alert>
                    <nz-alert *ngIf="state == 'run'" nzType="info" nzMessage="应用评估中，请稍后…" nzShowIcon></nz-alert>
                    <nz-alert *ngIf="state == 'err'" nzType="error" nzMessage="服务启动失败，请重新启动" nzShowIcon></nz-alert>
                </div>
            </div>
            <div class="panel-title">在线测试</div>
            <div class="panel-sub-title" *ngIf="isDetail">仅支持上传 jpg、png、jpeg格式图片，且大小不得超过10M。</div>
            <div class="row-item">
                <div class="row-item-title">上传测试图片</div>
                <div class="row-item-ctx">
                    <input type="text" nz-input placeholder="请点击此处上传图片" />
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button nz-button nzType="defalut" (click)="start()">开始分析</button>
                </div>
            </div>
            <div class="test">
                <div class="test-title">
                    <div>测试图片</div>
                    <div>识别结果</div>
                </div>
                <div class="test-result" *ngIf="!started">
                    <div>
                        <img src="../../../../../assets/images/epy.png"/><span>暂无数据，请先上传图片</span>
                    </div>
                    <div>
                        <img src="../../../../../assets/images/epy.png"/><span>暂无数据</span>
                    </div>
                </div>
                <div class="test-result" *ngIf="started">
                    <div>
                        <img src="../../../../../assets/images/bgd.jpeg"/>
                    </div>
                    <div class="start">
                        <nz-tree [nzData]="nodes" nzShowIcon> </nz-tree>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <button nz-button nzType="defalut" class="prebutton" (click)="return()">上一步</button>
        <button nz-button nzType="defalut" class="nextbutton" (click)="nextStep()">下一步</button>
    </div>
</div>
